<template>
<div class="content" v-if="settings.isfooterShow">
    <van-tabbar v-model="settings.active" class="custom-tabbar" route placeholder>
        <template v-for="(item, index) in state.iconList" :key="item.id">
            <van-tabbar-item replace :icon="item.icon" :to="item.path">
                {{ item.name }}
            </van-tabbar-item>
        </template>
    </van-tabbar>
</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import useSettingStore from '@/store/modules/setting'
const settings = useSettingStore()


const route = useRoute()
const router = useRouter()
const state = reactive({
    // active: ref<any>(2),
    iconList: [
        {
            id: '1',
            name: '首页',
            icon: 'home-o',
            path: '/home',
            type: 'small'
        },
        {
            id: '2',
            name: '菜单',
            icon: 'search',
            path: '/menu',
            type: 'small'
        },
        // {
        //     id: '3',
        //     name: '消息',
        //     icon: 'friends-o',
        //     path: '/about',
        //     type: 'small'
        // },
        {
            id: '4',
            name: '我的',
            icon: 'setting-o',
            path: '/me',
            type: 'small'
        }
    ]
})

onMounted(() => {

})

</script>


<style lang="scss" scoped>
.content {
    width: 100%;
    .custom-tabbar {
        padding: 3px;
    }
    .custom-tabbar .van-tabbar-item {
        color: rgb(128, 128, 128); /* 修改文字颜色 */
    }
    .custom-tabbar .van-tabbar-item--active {
        // color: #000; /* 修改激活状态文字颜色 */
        color: var(--text-color);
        font-size: 14px;
        font-weight: 500;
    }
}
</style>